﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        .item {padding:15px 30px 30px;border-bottom:#e7e7e7 1px solid;
            -webkit-box-shadow:0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow:0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 0 40px rgba(0, 0, 0, 0.1) inset;}
    </style>
    <script type="text/javascript">
        function insertSnippet(id) {
            parent.oUtil.obj.insertHTML(document.getElementById(id).innerHTML);
        }
    </script>
</head>
<body>

<div class="item">
<div class="row-fluid">
    <div class="span12">
        <h4>Hero Unit</h4> 
    </div>
</div>
<div class="row-fluid">
    <div class="span10" id="divHeroUnit">
        <br />
        <div class="hero-unit">	        
            <h1>Hello, world!</h1>  
	        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content.</p>  
	        <p>    
            <a class="btn btn-primary btn-large">      Learn more    </a>  
            </p>            
        </div>
        <br />
    </div>
    <div class="span2">
        <div class="pull-right"><a class="btn" href="javascript:insertSnippet('divHeroUnit')">Insert</a></div>
    </div>
</div>
</div>

<div class="item">
<div class="row-fluid">
    <div class="span12">
        <h4>Page Header</h4> 
    </div>
</div>
<div class="row-fluid">
    <div class="span10" id="divPageHeader">
        <br />
        <div class="page-header">  
	        <h1>Page header <small>Subtext for header</small></h1>
        </div>
        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>          
    </div>
    <div class="span2">
        <div class="pull-right"><a class="btn" href="javascript:insertSnippet('divPageHeader')">Insert</a></div>
    </div>
</div>
</div>

<div class="item">
<div class="row-fluid">
    <div class="span12">
        <h4>Body copy</h4> 
    </div>
</div>
<div class="row-fluid">
    <div class="span10" id="divBodyCopy">
        <p>Body copy here. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>          
    </div>
    <div class="span2">        
        <div class="pull-right"><a class="btn" href="javascript:insertSnippet('divBodyCopy')">Insert</a></div>
    </div>
</div>
</div>

<div class="item">
<div class="row-fluid">
    <div class="span12">
        <h4>Lead copy</h4> 
    </div>
</div>
<div class="row-fluid">
    <div class="span10" id="divLeadCopy">
        <p class="lead">Lead copy here. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p> 
    </div>
    <div class="span2">        
        <div class="pull-right"><a class="btn" href="javascript:insertSnippet('divLeadCopy')">Insert</a></div>
    </div>
</div>
</div>

<div class="item">
<div class="row-fluid">
    <div class="span12">
        <h4>Address</h4> 
    </div>
</div>
<div class="row-fluid">
    <div class="span10" id="divAddress">
        <br />
        <address><strong>Your Company, Inc.</strong><br />
        Address<br />
        City, State, Zip<br />
        <abbr title="Phone">P:</abbr> (123) 456-7890</address> 
        <address>  <strong>Full Name</strong><br />
        <a href="mailto:#">first.last@gmail.com</a></address>  
        <br />
    </div>
    <div class="span2">
        <div class="pull-right"><a class="btn" href="javascript:insertSnippet('divAddress')">Insert</a></div>
    </div>
</div>
</div>

<div class="item">
<div class="row-fluid">
    <div class="span12">
        <h4>Blockquote</h4> 
    </div>
</div>
<div class="row-fluid">
    <div class="span10" id="divBlockquote">
        <br />
        <blockquote>  
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>  
        <small>Someone famous <cite title="Source Title">Source Title</cite></small>
        </blockquote>
        <br />
    </div>
    <div class="span2">
        <div class="pull-right"><a class="btn" href="javascript:insertSnippet('divBlockquote')">Insert</a></div>
    </div>
</div>
</div>

<div class="item">
<div class="row-fluid">
    <div class="span12">
        <h4>Inline Code</h4> 
    </div>
</div>
<div class="row-fluid">
    <div class="span10" id="divInlineCode">
        &nbsp; <code>&lt;section&gt;</code> &nbsp;
    </div>
    <div class="span2">
        <div class="pull-right"><a class="btn" href="javascript:insertSnippet('divInlineCode')">Insert</a></div>
    </div>
</div>
</div>

<div class="item">
<div class="row-fluid">
    <div class="span12">
        <h4>Multiline Code</h4> 
    </div>
</div>
<div class="row-fluid">
    <div class="span10" id="divMultiCode">
        <br /><pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre><br />
    </div>
    <div class="span2">
        <div class="pull-right"><a class="btn" href="javascript:insertSnippet('divMultiCode')">Insert</a></div>
    </div>
</div>
</div>

<div class="item">
<div class="row-fluid">
    <div class="span12">
        <h4>Well</h4> 
    </div>
</div>
<div class="row-fluid">
    <div class="span10" id="divWell">
        <br />
        <div class="well">              
        Look, I'm in a well!
        </div>
        <br />
    </div>
    <div class="span2">
        <div class="pull-right"><a class="btn" href="javascript:insertSnippet('divWell')">Insert</a></div>
    </div>
</div>
</div>

</body>
</html>
